
import React from 'react'
import { Link } from 'react-router-dom'
import { 
  Row,
  Table,
  Input,
  Button,
  Form,
  DatePicker
} from 'antd'
import api from '@/api'
const { RangePicker } = DatePicker
const FormItem = Form.Item
const COLUMNS = [
  {
    title: '',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '操作时间',
    dataIndex: 'created_at',
    key: 'created_at',
  },
  {
    title: '用户名',
    dataIndex: 'administrator_name',
    key: 'administrator_name',
  },
  {
    title: '操作类型',
    // dataIndex: '',
    key: 'del',
    render: () => ('删除')
  },
  {
    title: '栏目名',
    dataIndex: 'action',
    key: 'action',
  },
  {
    title: '操作',
    key: 'actionbtn',
    width: 100,
    render: (record) => (
      <Button>
        <Link to={`/log/1`}>处理</Link>
      </Button>
    )
  }
]
export default class Log extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      filter: {
        limit: 13,
        page: 1,
        name: '',
        start_at: '',
        end_at: ''
      },
      log_count: 0,
      logs: []
    }
  }
  componentWillMount() {
    this.fetchList(1)
  }
  fetchList = async (_page) => {
    const filter =  this.state.filter
    filter.page = _page
    let logsdata = null
    let logs = []
    let log_count = 0
    try{
      logsdata = await api.log_list(filter)
    }catch{
      logsdata = {}
    }
    const data =  logsdata.data || {}
    if (data.status === 'success') {
      logs = data.data.logs.map((item, index) => {
        return {
          ...item,
          key: `${index}`
        }
      })
      log_count = Number(data.data.log_count)
    }
    this.setState({
      logs,
      log_count,
      filter
    })
  }
  handleSubmit = (e) => {
    e.preventDefault()
    this.fetchList(1)
  }
  pickerChange = (date, dateString) => {
    const {filter} = this.state
    filter.start_at = dateString[0]
    filter.end_at = dateString[1]
    this.setState({filter})
  }
  changefiltername = (e) => {
    const {filter} = this.state
    filter.name = e.target.value
    this.setState({filter})
  }

  render() {
    const {filter, log_count, logs} = this.state
    return (
      <div>
        <Row
          gutter={20}
          className="mariya-filter-form"
        >
          <div className="mariya-filter-form__title">操作日志</div>
            <Form
              className="mariya-filter-form__entity"
              layout="inline"
              onSubmit={this.handleSubmit}
            >
            <FormItem>
              <Input
                size="default"
                placeholder="账号"
                value={filter.name}
                onChange={this.changefiltername}
                allowClear
              />
            </FormItem>
            <FormItem>
            <RangePicker onChange={this.pickerChange} />
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">搜索</Button>
            </FormItem>
          </Form>
        </Row>
        <Row
          className="mariya-datagrid"
        >
          <Table
            dataSource={logs}
            columns={COLUMNS}
            size="small"
            bordered
            pagination={{
              defaultCurrent: 1,
              total: log_count,
              defaultPageSize: filter.limit
            }}
            onChange={({current}) => {this.fetchList(current)}}
          />
        </Row>
      </div>
    )
  }
}
